import { CONTAINER_TYPE, ComponentTreeNode } from "@illa-public/public-types"

export const TIP_NODES: ComponentTreeNode = {
  version: 0,
  displayName: "container3",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "container",
  childrenNode: [
    {
      version: 0,
      displayName: "canvas7",
      parentNode: "container3",
      showName: "canvas",
      childrenNode: [
        {
          version: 0,
          displayName: "text2",
          parentNode: "canvas7",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 4,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 0,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value: "# How to Build your AI tools",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "divider1",
          parentNode: "canvas7",
          showName: "divider",
          childrenNode: [],
          type: "DIVIDER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 5,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 12,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            fs: "14px",
            hidden: false,
          },
        },
        {
          version: 0,
          displayName: "text5",
          parentNode: "canvas7",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 4,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 20,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value:
              "**🪵 Drag-and-drop components to building frontend interfaces**",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "text7",
          parentNode: "canvas7",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 4,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 71,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value: "**📃 Create actions with your data source or AI Agent**",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "container5",
          parentNode: "canvas7",
          showName: "container",
          childrenNode: [
            {
              version: 0,
              displayName: "canvas13",
              parentNode: "container5",
              showName: "canvas",
              childrenNode: [
                {
                  version: 0,
                  displayName: "text8",
                  parentNode: "canvas13",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 5,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 0,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value:
                      "This step allows you to connect to your own data source, perform queries, and other operations. You can also integrate the AI Agent into your tool to make it smarter.\n***We have automatically created an action with AI Agent. You can still add new ones by clicking `+ New`  at the bottom of the page.***",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "image4",
                  parentNode: "canvas13",
                  showName: "image",
                  childrenNode: [],
                  type: "IMAGE_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 37,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 10,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    hidden: false,
                    imageSrc:
                      "https://cloud-api.illacloud.com/drive/f/f554ff2c-f245-41b4-8ccc-f80da547d8ae",
                    imageSrcByURL:
                      "https://cloud-api.illacloud.com/drive/f/f554ff2c-f245-41b4-8ccc-f80da547d8ae",
                    objectFit: "scale-down",
                    radius: "0px",
                  },
                },
              ],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
            {
              version: 0,
              displayName: "canvas14",
              parentNode: "container5",
              showName: "canvas",
              childrenNode: [],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
            {
              version: 0,
              displayName: "canvas15",
              parentNode: "container5",
              showName: "canvas",
              childrenNode: [],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "CONTAINER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 59,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 78,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            backgroundColor: "#f3f3f3ff",
            currentIndex: 0,
            currentKey: "View 1",
            dynamicHeight: "auto",
            padding: {
              mode: "all",
              size: "24",
            },
            radius: "4px",
            resizeDirection: "HORIZONTAL",
            shadow: "none",
            viewList: [
              {
                id: "1b063da1-bb04-4321-be13-ee13e2178141",
                key: "View 1",
                label: "View 1",
              },
              {
                id: "0fea99bb-df46-45ef-aa46-c6b05c6ac074",
                key: "View 2",
                label: "View 2",
              },
              {
                id: "10817fe8-3c53-4bbb-af8c-ab076d324c27",
                key: "View 3",
                label: "View 3",
              },
            ],
          },
        },
        {
          version: 0,
          displayName: "text9",
          parentNode: "canvas7",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 4,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 140,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value: "**🔗 Connect components and actions**",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "container6",
          parentNode: "canvas7",
          showName: "container",
          childrenNode: [
            {
              version: 0,
              displayName: "canvas16",
              parentNode: "container6",
              showName: "canvas",
              childrenNode: [
                {
                  version: 0,
                  displayName: "text10",
                  parentNode: "canvas16",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 12,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 3,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    borderWidth: "14px",
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value:
                      "Configure the inputs of Actions with the data of components. Click </> on the left panel to  check the data of any conmponents or data sources. For example, the data of input components is `displayName.value`. Please make sure to enclose the data with `{{`",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "image5",
                  parentNode: "canvas16",
                  showName: "image",
                  childrenNode: [],
                  type: "IMAGE_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 45,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 15,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    hidden: false,
                    imageSrc:
                      "https://cloud-api.illacloud.com/drive/f/cff4d7a0-b06b-4bb1-b375-d9e013c1b713",
                    imageSrcByURL:
                      "https://cloud-api.illacloud.com/drive/f/cff4d7a0-b06b-4bb1-b375-d9e013c1b713",
                    objectFit: "scale-down",
                    radius: "0px",
                  },
                },
                {
                  version: 0,
                  displayName: "text17",
                  parentNode: "canvas16",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 8,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 60,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value:
                      "Display the result of the Actions on the components. The result of actions is usually in actionDisplayname.data. You can check it on left panel.",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "text18",
                  parentNode: "canvas16",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 6,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 68,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value:
                      "Add event handler to the components to trigger the Action.",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "container10",
                  parentNode: "canvas16",
                  showName: "container",
                  childrenNode: [
                    {
                      version: 0,
                      displayName: "canvas28",
                      parentNode: "container10",
                      showName: "canvas",
                      childrenNode: [
                        {
                          version: 0,
                          displayName: "text19",
                          parentNode: "canvas28",
                          showName: "text",
                          childrenNode: [],
                          type: "TEXT_WIDGET",
                          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                          h: 5,
                          w: 32,
                          minH: 3,
                          minW: 1,
                          x: 0,
                          y: 0,
                          z: 0,
                          props: {
                            $dynamicAttrPaths: [],
                            colorScheme: "grayBlue",
                            disableMarkdown: false,
                            dynamicHeight: "auto",
                            fs: "14px",
                            hidden: false,
                            horizontalAlign: "start",
                            resizeDirection: "HORIZONTAL",
                            value: "📖 How to add event handler >",
                            verticalAlign: "center",
                          },
                        },
                      ],
                      type: "CANVAS",
                      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
                      h: 0,
                      w: 0,
                      minH: 0,
                      minW: 1,
                      x: -1,
                      y: -1,
                      z: 0,
                      props: {},
                    },
                  ],
                  type: "CONTAINER_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 9,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 74,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    backgroundColor: "white",
                    currentIndex: 0,
                    currentKey: "View 1",
                    dynamicHeight: "auto",
                    events: [
                      {
                        actionType: "openUrl",
                        eventType: "click",
                        id: "events-3ef1522f-8378-4037-9e5e-2daea9beafc7",
                        newTab: true,
                        url: "https://docs.illacloud.com/event-handler",
                      },
                    ],
                    padding: {
                      mode: "all",
                      size: "10",
                    },
                    radius: "4px",
                    resizeDirection: "HORIZONTAL",
                    shadow: "small",
                    viewList: [
                      {
                        id: "125370cb-9d3d-4c6e-848d-34bf952550fb",
                        key: "View 1",
                        label: "View 1",
                      },
                    ],
                  },
                },
              ],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
            {
              version: 0,
              displayName: "canvas17",
              parentNode: "container6",
              showName: "canvas",
              childrenNode: [],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
            {
              version: 0,
              displayName: "canvas18",
              parentNode: "container6",
              showName: "canvas",
              childrenNode: [],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "CONTAINER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 92,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 147,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            backgroundColor: "#f3f3f3ff",
            currentIndex: 0,
            currentKey: "View 1",
            dynamicHeight: "auto",
            padding: {
              mode: "all",
              size: "24",
            },
            radius: "4px",
            resizeDirection: "HORIZONTAL",
            shadow: "none",
            viewList: [
              {
                id: "1b063da1-bb04-4321-be13-ee13e2178141",
                key: "View 1",
                label: "View 1",
              },
              {
                id: "0fea99bb-df46-45ef-aa46-c6b05c6ac074",
                key: "View 2",
                label: "View 2",
              },
              {
                id: "10817fe8-3c53-4bbb-af8c-ab076d324c27",
                key: "View 3",
                label: "View 3",
              },
            ],
          },
        },
        {
          version: 0,
          displayName: "text11",
          parentNode: "canvas7",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 12,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 241,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value: "# Use case",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "divider2",
          parentNode: "canvas7",
          showName: "divider",
          childrenNode: [],
          type: "DIVIDER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 5,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 253,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            fs: "14px",
            hidden: false,
          },
        },
        {
          version: 0,
          displayName: "container9",
          parentNode: "canvas7",
          showName: "container",
          childrenNode: [
            {
              version: 0,
              displayName: "canvas25",
              parentNode: "container9",
              showName: "canvas",
              childrenNode: [
                {
                  version: 0,
                  displayName: "text15",
                  parentNode: "canvas25",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 4,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 38,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value: "### Marketing content management",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "image1",
                  parentNode: "canvas25",
                  showName: "image",
                  childrenNode: [],
                  type: "IMAGE_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 38,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 0,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    hidden: false,
                    imageSrc:
                      "https://cloud-api.illacloud.com/drive/f/515407ea-3c57-4527-ab9f-9472d55984f0",
                    imageSrcByURL:
                      "https://cloud-api.illacloud.com/drive/f/515407ea-3c57-4527-ab9f-9472d55984f0",
                    objectFit: "cover",
                    radius: "0px",
                  },
                },
              ],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "CONTAINER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 55,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 374,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            backgroundColor: "#f6ecf6ff",
            currentIndex: 0,
            currentKey: "View 1",
            dynamicHeight: "auto",
            events: [
              {
                actionType: "openUrl",
                eventType: "click",
                id: "events-acb3455e-c33f-4aff-9b71-2d836c0d166c",
                newTab: true,
                url: "https://illa.ai/app/ILAcx4p1C7J0/detail",
              },
            ],
            padding: {
              mode: "all",
              size: "24",
            },
            radius: "4px",
            resizeDirection: "HORIZONTAL",
            shadow: "none",
            viewList: [
              {
                id: "1b063da1-bb04-4321-be13-ee13e2178141",
                key: "View 1",
                label: "View 1",
              },
            ],
          },
        },
        {
          version: 0,
          displayName: "container8",
          parentNode: "canvas7",
          showName: "container",
          childrenNode: [
            {
              version: 0,
              displayName: "canvas22",
              parentNode: "container8",
              showName: "canvas",
              childrenNode: [
                {
                  version: 0,
                  displayName: "text14",
                  parentNode: "canvas22",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 9,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 38,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value: "### CMS - Localization management",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "image2",
                  parentNode: "canvas22",
                  showName: "image",
                  childrenNode: [],
                  type: "IMAGE_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 38,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 0,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    hidden: false,
                    imageSrc:
                      "https://cloud-api.illacloud.com/drive/f/464795e9-5582-4799-aaea-b5ad98e86692",
                    imageSrcByURL:
                      "https://cloud-api.illacloud.com/drive/f/464795e9-5582-4799-aaea-b5ad98e86692",
                    objectFit: "cover",
                    radius: "0px",
                  },
                },
              ],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "CONTAINER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 55,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 316,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            backgroundColor: "#f6ecf6ff",
            currentIndex: 0,
            currentKey: "View 1",
            dynamicHeight: "auto",
            events: [
              {
                actionType: "openUrl",
                eventType: "click",
                id: "events-6a3ea8f4-8f3a-4129-9f75-b0a50ff4a59a",
                newTab: true,
                url: "https://illa.ai/app/ILAcx4p1C7JZ/detail",
              },
            ],
            padding: {
              mode: "all",
              size: "24",
            },
            radius: "4px",
            resizeDirection: "HORIZONTAL",
            shadow: "none",
            viewList: [
              {
                id: "1b063da1-bb04-4321-be13-ee13e2178141",
                key: "View 1",
                label: "View 1",
              },
            ],
          },
        },
        {
          version: 0,
          displayName: "container7",
          parentNode: "canvas7",
          showName: "container",
          childrenNode: [
            {
              version: 0,
              displayName: "canvas19",
              parentNode: "container7",
              showName: "canvas",
              childrenNode: [
                {
                  version: 0,
                  displayName: "text13",
                  parentNode: "canvas19",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 4,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 38,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value: "### CRM with Email generator",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "image3",
                  parentNode: "canvas19",
                  showName: "image",
                  childrenNode: [],
                  type: "IMAGE_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 38,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 0,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    hidden: false,
                    imageSrc:
                      "https://cloud-api.illacloud.com/drive/f/899c9b4c-516d-4f41-82a0-1821ceaa0120",
                    imageSrcByURL:
                      "https://cloud-api.illacloud.com/drive/f/899c9b4c-516d-4f41-82a0-1821ceaa0120",
                    objectFit: "cover",
                    radius: "0px",
                  },
                },
              ],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "CONTAINER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 55,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 258,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            backgroundColor: "#f6ecf6ff",
            currentIndex: 0,
            currentKey: "View 1",
            dynamicHeight: "auto",
            events: [
              {
                actionType: "openUrl",
                eventType: "click",
                id: "events-587f5d59-57b4-4890-a490-fb5466baf16c",
                newTab: true,
                url: "https://illa.ai/app/ILAfx4p1C7Xj/detail",
              },
            ],
            padding: {
              mode: "all",
              size: "24",
            },
            radius: "4px",
            resizeDirection: "HORIZONTAL",
            shadow: "none",
            viewList: [
              {
                id: "1b063da1-bb04-4321-be13-ee13e2178141",
                key: "View 1",
                label: "View 1",
              },
            ],
          },
        },
        {
          version: 0,
          displayName: "container4",
          parentNode: "canvas7",
          showName: "container",
          childrenNode: [
            {
              version: 0,
              displayName: "canvas10",
              parentNode: "container4",
              showName: "canvas",
              childrenNode: [
                {
                  version: 0,
                  displayName: "text6",
                  parentNode: "canvas10",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 23,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 5,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    borderWidth: "14px",
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "14px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value:
                      "1. Receive user input as strings: `input`,` text area`, etc.  \n2. Receive user input as numbers: `number input`, `slider`, etc., or use the `input` component and convert its value to a number type, such as `parseInt(input1.value)`.\n3. Receive user input as files: `file uploader`.\n4. Display data: `data grid`, `list`, `chart`, etc.\n5. Display files: `image`, `video`, `pdf`, etc.",
                    verticalAlign: "center",
                  },
                },
                {
                  version: 0,
                  displayName: "text16",
                  parentNode: "canvas10",
                  showName: "text",
                  childrenNode: [],
                  type: "TEXT_WIDGET",
                  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
                  h: 5,
                  w: 32,
                  minH: 3,
                  minW: 1,
                  x: 0,
                  y: 0,
                  z: 0,
                  props: {
                    $dynamicAttrPaths: [],
                    borderWidth: "15px",
                    colorScheme: "grayBlue",
                    disableMarkdown: false,
                    dynamicHeight: "auto",
                    fs: "15px",
                    hidden: false,
                    horizontalAlign: "start",
                    resizeDirection: "HORIZONTAL",
                    value:
                      "The components we provide can address the majority of requirements in most scenarios.",
                    verticalAlign: "center",
                  },
                },
              ],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
            {
              version: 0,
              displayName: "canvas11",
              parentNode: "container4",
              showName: "canvas",
              childrenNode: [],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
            {
              version: 0,
              displayName: "canvas12",
              parentNode: "container4",
              showName: "canvas",
              childrenNode: [],
              type: "CANVAS",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 1,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "CONTAINER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 42,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 25,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            backgroundColor: "#f5f5f5ff",
            currentIndex: 0,
            currentKey: "View 1",
            dynamicHeight: "auto",
            padding: {
              mode: "all",
              size: "24",
            },
            radius: "4px",
            resizeDirection: "HORIZONTAL",
            shadow: "none",
            viewList: [
              {
                id: "1b063da1-bb04-4321-be13-ee13e2178141",
                key: "View 1",
                label: "View 1",
              },
              {
                id: "0fea99bb-df46-45ef-aa46-c6b05c6ac074",
                key: "View 2",
                label: "View 2",
              },
              {
                id: "10817fe8-3c53-4bbb-af8c-ab076d324c27",
                key: "View 3",
                label: "View 3",
              },
            ],
          },
        },
      ],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
    {
      version: 0,
      displayName: "canvas8",
      parentNode: "container3",
      showName: "canvas",
      childrenNode: [],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
    {
      version: 0,
      displayName: "canvas9",
      parentNode: "container3",
      showName: "canvas",
      childrenNode: [],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
  ],
  type: "CONTAINER_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 473,
  w: 13,
  minH: 3,
  minW: 1,
  x: 0,
  y: 0,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    backgroundColor: "#ffffffff",
    currentIndex: 0,
    currentKey: "View 1",
    dynamicHeight: "auto",
    padding: {
      mode: "all",
      size: "40",
    },
    radius: "4px",
    resizeDirection: "HORIZONTAL",
    shadow: "small",
    viewList: [
      {
        id: "2468b61b-ee26-4279-b65d-0321f6ea94ab",
        key: "View 1",
        label: "View 1",
      },
      {
        id: "a564e82e-c76e-491a-b154-84db3077a965",
        key: "View 2",
        label: "View 2",
      },
      {
        id: "250a835b-2897-41f8-93a0-25278669160f",
        key: "View 3",
        label: "View 3",
      },
    ],
  },
}

export const AGENT_INPUT_CONTAINER_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "container1",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "container",
  childrenNode: [
    {
      version: 0,
      displayName: "canvas1",
      parentNode: "container1",
      showName: "canvas",
      childrenNode: [
        {
          version: 0,
          displayName: "text3",
          parentNode: "canvas1",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 4,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 21,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value: "**Send to AI Agent**",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "text12",
          parentNode: "canvas1",
          showName: "text",
          childrenNode: [],
          type: "TEXT_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 12,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 0,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            disableMarkdown: false,
            dynamicHeight: "auto",
            fs: "14px",
            hidden: false,
            horizontalAlign: "start",
            resizeDirection: "HORIZONTAL",
            value: "# Demo built with your AI Agent",
            verticalAlign: "center",
          },
        },
        {
          version: 0,
          displayName: "divider3",
          parentNode: "canvas1",
          showName: "divider",
          childrenNode: [],
          type: "DIVIDER_WIDGET",
          containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
          h: 5,
          w: 32,
          minH: 3,
          minW: 1,
          x: 0,
          y: 12,
          z: 0,
          props: {
            $dynamicAttrPaths: [],
            colorScheme: "grayBlue",
            fs: "14px",
            hidden: false,
          },
        },
      ],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
    {
      version: 0,
      displayName: "canvas2",
      parentNode: "container1",
      showName: "canvas",
      childrenNode: [],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
    {
      version: 0,
      displayName: "canvas3",
      parentNode: "container1",
      showName: "canvas",
      childrenNode: [],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
  ],
  type: "CONTAINER_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 395,
  w: 19,
  minH: 3,
  minW: 1,
  x: 13,
  y: 0,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    backgroundColor: "#ffffffff",
    currentIndex: 0,
    currentKey: "View 1",
    dynamicHeight: "auto",
    padding: {
      mode: "all",
      size: "40",
    },
    radius: "4px",
    resizeDirection: "HORIZONTAL",
    shadow: "small",
    viewList: [
      {
        id: "2468b61b-ee26-4279-b65d-0321f6ea94ab",
        key: "View 1",
        label: "View 1",
      },
      {
        id: "a564e82e-c76e-491a-b154-84db3077a965",
        key: "View 2",
        label: "View 2",
      },
      {
        id: "250a835b-2897-41f8-93a0-25278669160f",
        key: "View 3",
        label: "View 3",
      },
    ],
  },
}

export const TEST_ROOT_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "root",
  parentNode: "",
  showName: "root",
  childrenNode: [
    {
      version: 0,
      displayName: "guide",
      parentNode: "root",
      showName: "page",
      childrenNode: [
        {
          version: 0,
          displayName: "bodySection1",
          parentNode: "guide",
          showName: "bodySection",
          childrenNode: [
            {
              version: 0,
              displayName: "bodySection1-bodySectionContainer1",
              parentNode: "bodySection1",
              showName: "bodySection1-bodySectionContainer1",
              childrenNode: [TIP_NODES, AGENT_INPUT_CONTAINER_NODE],
              type: "CONTAINER_NODE",
              containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
              h: 0,
              w: 0,
              minH: 0,
              minW: 0,
              x: -1,
              y: -1,
              z: 0,
              props: {},
            },
          ],
          type: "SECTION_NODE",
          containerType: CONTAINER_TYPE.EDITOR_LAYOUT_SQUARE,

          h: 0,
          w: 0,
          minH: 0,
          minW: 0,
          x: -1,
          y: -1,
          z: 0,
          props: {
            currentViewIndex: 0,
            defaultViewKey: "sub-page1",
            sectionViewConfigs: [
              {
                id: "7b9a7598-f6a5-4440-919d-36d1dc26e8e0",
                key: "sub-page1",
                path: "how-to",
                viewDisplayName: "bodySection1-bodySectionContainer1",
              },
            ],
            style: {
              padding: {
                size: "48",
              },
            },
            viewSortedKey: ["bodySection1-bodySectionContainer1"],
          },
        },
        {
          version: 0,
          displayName: "modalSection1",
          parentNode: "guide",
          showName: "modalSection",
          childrenNode: [],
          type: "MODAL_SECTION_NODE",
          containerType: CONTAINER_TYPE.EDITOR_LAYOUT_SQUARE,
          h: 0,
          w: 0,
          minH: 0,
          minW: 0,
          x: -1,
          y: -1,
          z: 0,
          props: {},
        },
      ],
      type: "PAGE_NODE",
      containerType: CONTAINER_TYPE.EDITOR_PAGE_SQUARE,
      h: 0,
      w: 0,
      minH: 0,
      minW: 0,
      x: -1,
      y: -1,
      z: 0,
      props: {
        bodyColumns: 32,
        bottomHeight: 0,
        canvasSize: "fixed",
        canvasWidth: 1440,
        footerColumns: 32,
        hasFooter: false,
        hasHeader: false,
        hasLeft: false,
        hasRight: false,
        headerColumns: 32,
        isFooterFixed: true,
        isHeaderFixed: true,
        isLeftFixed: true,
        isRightFixed: true,
        layout: "default",
        leftColumns: 8,
        leftPosition: "NONE",
        leftWidth: 0,
        rightColumns: 8,
        rightPosition: "NONE",
        rightWidth: 0,
        showLeftFoldIcon: false,
        showRightFoldIcon: false,
        topHeight: 0,
      },
    },
  ],
  type: "DOT_PANEL",
  containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
  h: 0,
  w: 0,
  minH: 0,
  minW: 0,
  x: -1,
  y: -1,
  z: 0,
  props: {
    currentPageIndex: 0,
    homepageDisplayName: "guide",
    pageSortedKey: ["guide"],
    viewportSizeType: "fluid",
  },
}
